<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="style/system.css" />
    <script type="text/javascript" src="utils/jquery.min.js"></script>
    <script
      type="text/javascript"
      src="utils/jquery.SuperSlide.2.1.1.js"
    ></script>
    <style>
      /* 全局样式 */
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background-color: #ffffff;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }

      /* 主容器样式 */
      #app {
        max-width: 1200px;
        background-color: #fff;
        border-radius: 10px;
        /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
        padding: 30px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 90%;
      }

      /* 左侧列表标题样式 */
      .ato-list-fl {
        width: 20%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .ato-title h2 {
        color: #333;
        font-size: 28px;
        margin-bottom: 15px;
        font-weight: 600;
      }

      .ato-title p {
        color: #666;
        font-size: 16px;
        margin-bottom: 30px;
      }

      /* 左右箭头按钮样式 */
      .prev,
      .next {
        display: inline-block;
        cursor: pointer;
        transition: transform 0.3s ease;
        background-color: #f0f0f0;
        border-radius: 50%;
        padding: 10px;
        margin: 5px;
      }

      .prev:hover,
      .next:hover {
        transform: scale(1.1);
        background-color: #e0e0e0;
      }

      .ato-ope {
        width: 25px;
        height: 25px;
        vertical-align: middle;
      }

      .ato-ope1 {
        display: none;
      }

      /* 右侧系统列表样式 */
      .ato-list {
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px;
      }

      .ato-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: calc(33.33% - 20px);
      }

      .ato-list li {
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        /* padding: 20px; */
        text-align: center;
        transition: box-shadow 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .ato-list li:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      .ato-logo001 {
        width: 100px;
        height: 100px;
        object-fit: contain;
        margin-bottom: 15px;
      }

      .ato-list h3 {
        color: #333;
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 500;
      }

      .ato-list p {
        /* color: #666; */
        font-size: 16px;
        margin-bottom: 15px;
        flex-grow: 1;
      }

      .ato-more {
        border: 1px solid #7d7d7d;
        line-height: 15px;
        display: inline-block;
        /* background-color: #108cee; */
        color: #666;
        padding: 10px 20px;
        /* border-radius: 5px; */
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.3s ease;
      }

      .ato-more:hover {
        background-color: #108cee;
      }
    </style>
  </head>

  <body>
    <div id="app" class="ato-content clearfix">
      <div class="ato-list-fl">
        <div class="ato-title">
          <h2>您好！{{use}}</h2>
          <p>请选择要进入的系统</p>
        </div>
        <!-- <a href="javascript:;" class="prev">
          <img src="admin/images/icon-left.png" alt="" class="ato-ope" />
          <img src="admin/images/icon-left1.png" alt="" class="ato-ope1" />
        </a>
        <a href="javascript:;" class="next">
          <img src="admin/images/icon-right.png" alt="" class="ato-ope" />
          <img
            src="admin/images/icon-right1.png"
            alt=""
            class="ato-ope1 ato-ope2"
          />
        </a> -->
      </div>
      <div
        class="ato-list"
        style="display: flex; justify-content: left; cursor: pointer"
      >
        <ul v-for="(item, index) in xt" :key="index">
          <li @click="handleEnter(item)">
            <div>
              <!-- 拼接 src 路径 -->
              <img
                :src="BASE_IMG + item.Enterprise_Logo"
                alt=""
                class="ato-logo001"
              />
            </div>
            <h3>{{item.System_Name}}</h3>
            <p>{{item.System_Remark}}</p>
            <span class="ato-more">查看详情</span>
          </li>
        </ul>
      </div>
    </div>
    <script type="text/javascript" src="utils/vue.min.js"></script>
    <script type="text/javascript" src="utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="utils/utils.js"></script>
    <script type="text/javascript">
      // let data = JSON.parse($.cookie("systemData"));
      // console.log(data);

      new Vue({
        el: "#app",
        data() {
          return {
            BASE_IMG: "https://www.kdddy.cn/Image/",
            xt: [],
            // data,
            use: sessionStorage.getItem("ID_Name"),
          };
        },
        mounted() {
          this.qx();
          jQuery(".ato-content").slide({
            titCell: ".ato-list-fl ul",
            mainCell: ".ato-list ul",
            autoPage: true,
            effect: "leftLoop",
            autoPlay: true,
            vis: 3,
          });
        },
        methods: {
          qx() {
            let User_Number = sessionStorage.getItem("User_Number");
            let Enterprise_Info_SerialNumber = sessionStorage.getItem(
              "Enterprise_Info_SerialNumber"
            );
            console.log(User_Number);
            console.log(Enterprise_Info_SerialNumber);
            //获取System_SerialNumber
            $.ajax({
              headers: {
                AccessToken: $.cookie("token"), //会将数据转换为query string
              },
              // url: "http://192.168.10.86:8087/User/getSystemByEnterprise",
              url: "https://service.kdddy.cn/donghuiForRequest/User/getSystemByEnterprise",
              method: "get",
              data: {
                User_Number: User_Number,
                Enterprise_Info_SerialNumber: Enterprise_Info_SerialNumber,
              },
              success: (res) => {
                console.log(res);
                this.xt = res.Data;
              },
              fail: (err) => {
                console.error(err);
              },
              complete: function (xhr, status) {
                // 检查 Token 是否过期
                if (xhr.statusCode === 302) {
                  // 清除本地存储的 Token
                  sessionStorage.removeItem("token");
                  // 从响应头中获取重定向信息
                  const redirectUrl = xhr.header.contentpath;
                  if (redirectUrl) {
                    // 如果有重定向信息，跳转到指定页面
                    // window.location.href = redirectUrl;
                    window.location.href = "/pages/index/index"; //返回去
                  }
                }
              },
            });
            // return
          },
          handleEnter(item) {
            console.log(item);

            sessionStorage.setItem(
              "System_SerialNumber",
              item.System_SerialNumber
            );
            let a = sessionStorage.getItem("System_SerialNumber");
            console.log(a);

            $.cookie("system", JSON.stringify(item));
            window.location.href = "./index.html";
          },
        },
      });
    </script>
  </body>
</html>
